{% extends "base.html" %}
{% block title %}{{ Project.title }} - 氧化钙{% endblock %}
{% block head %}
<link rel="stylesheet" href="static/css/base.css">


<span id="getId" data-Project_id= "{{ Project.id }}" data-is_love= "{{ is_love }}" data-is_collection = "{{ is_collection }}"></span>
<script type="application/javascript">
  const getId = document.getElementById('getId');
  const Project_id = getId.getAttribute("data-Project_id");
  var is_love = getId.getAttribute("data-is_love");
  var is_collection = getId.getAttribute("data-is_collection");
  console.log(Project_id)
  window.scratchConfig = {
    stageArea:{
      scale: 1, //自适应屏幕尺寸
      width: 480,
      height: 360,
      showControl: true, //是否显示舞台区控制按钮
      fullscreenButton:{ //全屏按钮
        show: true,
        handleBeforeSetStageUnFull(){ //退出全屏前的操作
          return true
        },
        handleBeforeSetStageFull(){ //全屏前的操作
          return true
        }
      },
      startButton:{ //开始按钮
        show: true,
        handleBeforeStart(){ //开始前的操作
          return true
        }
      },
      stopButton:{ // 停止按钮
        show: true,
        handleBeforeStop(){ //停止前的操作
          return true
        }
      }
    },
    handleVmInitialized: (vm) => {
      window.vm = vm  
      //vm.loadProject("/static/scratch/static/project/1.sb3")    
    },
    handleProjectLoaded:() => {
    },
    handleDefaultProjectLoaded:() => {
    },
    //默认项目地址,不需要修请删除本配置项
    defaultProjectURL: "../static/upload/project/" + Project_id.toString() + ".sb3",
  }
</script>
<style>
  .iframe{
    min-height: 800px;
  }
  .pading{
    padding: 30px;
  }
  .profile{
    width: 100%;
    margin-top: 10px;
    height: calc( 100% - 20px);
    background-color: #f0f0f0;
    border-radius: 10px;
  }
</style>
{% endblock %}
{% block body %}

<div class="main_body">
  <div class="shadow pading">
    <h4 id="title-show">{{ Project.title }}</h4><input type="text" value="{{ Project.title }}" id="title-input">
    <input type="text" style="display:none" class="form-control" placeholder="{{ Project.title }}" id="title-input">
    <p style="color: darkgray;">作者: <a href="/user/{{ Project.author_id }}">{{ project_author }}</a></p>
    <div class="row">
      <div id="scratch" style="width: 480px;margin-left: 10px;margin-top: -25px;overflow: hidden;">
        <div style="width: 100%;height: calc(100% - 20px);margin-top: 20px;background-color:hsla(215, 100%, 65%, 1);"></div>
        </div>
          <div class="card-profile">
            <div class="row" style="margin-left: 2px;">
            <a href="/editor/{{ Project.id }}" class="btn btn-primary btn-sm">转到设计页面</a> {%if is_author == 1%}<button type="button" style="margin-left: 10px;" class="btn btn-primary btn-sm" id="save">保存</button> <button type="button" style="margin-left: 10px;" class="btn btn-light btn-sm" id="editor">编辑</button>{% endif %}
          </div>
            <div id="profile-show" class="profile"><p id="profile-show-inside" style="padding: 15px;">{{ Project.profiles }}</p></div>
            <textarea id="profile-input" style="display: none;margin-top:10px;height: 95%;width: 100%;" class="form-control" aria-label="With textarea">{{ Project.profiles }}</textarea>
          </div>
    </div>
    <hr>
  <div class="row" style="margin-left: 0px;margin-top: 10px;">
    <p id="love" style="color: gray;"><i class="fa fa-heart" style="font-size:20px;"></i>  <p style="color: gray;margin-left: 5px;" id="love_text"> {{ Project.love }}</p> </p>
    <p id="collection" style="margin-left: 10px;color: gray;"> <i class="fa fa-star" style="font-size:20px;"></i> <p style="color: gray;margin-left: 5px;" id="collection_text"> {{ Project.collection }}</p>   </p>
    <p style="margin-left: 10px;color: gray;"> <i class="fa fa-eye" style="font-size:20px"></i>  {{ Project.see }} </p>
  </div> 
  </div>



<div style="margin-top:20px ;margin-left: 0px;">
  <div class="shadow pading" style="width: 100%;">
    <iframe width="100%" class="iframe" src="/GetComment/{{ Project.id }}" frameborder="0" οnlοad="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
</div>
</div>
</div>
<p id="project_id" style="display: none;">{{ Project.id }}</p>
<script type="text/javascript" src="/static/scratch/lib.min.js"></script>
<script type="text/javascript" src="/static/scratch/chunks/player.js"></script>
<script>
  title_show = document.getElementById('title-show')
  profile_show = document.getElementById('profile-show-inside')
	// 下面
	$(document).ready(function(){
    if( is_love == "true"){
      $("#love").attr("style","color: red;margin-left: 10px;");
    }
    $("#love").click(function(){
      if( $(this).css("color") == "rgb(255, 0, 0)"){
        $(this).attr("style","color: gray;");
        $('#upload_Modal').modal('show')
        document.getElementById("love_text").innerHTML = parseInt(document.getElementById("love_text").innerHTML) -1
        upload(-1,0)
      }else{
        $(this).attr("style","color: red;");
        $('#upload_Modal').modal('show')
        document.getElementById("love_text").innerHTML = parseInt(document.getElementById("love_text").innerHTML) +1
        upload(-1,1)
      }


    });


    if( is_collection == "true"){
      $("#collection").attr("style","color: gold;");
    }

    $("#collection").click(function(){
      if( $(this).css("color") == "rgb(255, 215, 0)"){
        $(this).attr("style","margin-left: 10px;color: gray;");
        $('#upload_Modal').modal('show')
        document.getElementById("collection_text").innerHTML = parseInt(document.getElementById("collection_text").innerHTML) -1
        upload(0,-1)
      }else{
        $(this).attr("style","color: gold;margin-left: 10px;");
        $('#upload_Modal').modal('show')
        document.getElementById("collection_text").innerHTML = parseInt(document.getElementById("collection_text").innerHTML) +1
        upload(1,-1)
      }
    });

    $("#title-input").hide();
    $("#save").hide();
    $("#editor").click(function(){
      $("#save").toggle();
      $("#profile-input").toggle();
      $("#profile-show").toggle();
      $("#title-input").toggle();
      $("#title-show").toggle();
    });
    $("#save").click(function(){
      $("#save").toggle();
      $("#profile-input").toggle();
      $("#profile-show").toggle();
      $("#title-input").toggle();
      $("#title-show").toggle();
      $('#upload_Modal').modal('show');
      $.post("/setprojectprofile", {title:$("#title-input").val(),
                                    profile:$("#profile-input").val(),
                                    Project_id: $("#project_id").text()},
       function(data, status){
          setTimeout(() => {$('#upload_Modal').modal('hide')},500) 
          document.getElementById("title-show").innerHTML = $("#title-input").val();
          document.getElementById("profile-show").innerHTML = '<p id="profile-show-inside" style="padding: 15px;">'+$("#profile-input").val()+'</p>';
      });
    });
  });
  function upload(collection,love){
    $.post("/Project_operation/"+Project_id,
    {
      collection:collection,
      love:love,
    },
    function(data,status){
      setTimeout(() => {$('#upload_Modal').modal('hide')},500)
    });
  }
</script>

<div class="modal fade" id="upload_Modal" tabindex="-1" aria-labelledby="upload_Modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        正在操作...
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="over_Modal" tabindex="-1" aria-labelledby="upload_Modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        更改成功!
      </div>
    </div>
  </div>
</div>
{% endblock %}